<template>
	<div>
		<Modal
			v-model="isOPen"
			title="添加常用功能"
			@on-cancel="isOk(false)"
			@on-ok="isOk(true)"
		>
			<div class="administrators-seting-roles">
				<Form
					ref="fromData"
					:model="fromData"
					class="isForm"
					:label-width="110"
					:rules="ruleValidate"
				>
					<FormItem class="isFormItem" label="所属系统:" prop="title">
						<Input
							class="isFromWidth"
							v-model="fromData.title"
						></Input>
					</FormItem>
					<FormItem class="isFormItem" label="功能名称:" prop="title">
						<Input
							class="isFromWidth"
							v-model="fromData.title"
						></Input>
					</FormItem>
					<FormItem class="isFormItem" label="功能图标:" prop="title">
						<Input
							class="isFromWidth"
							v-model="fromData.title"
						></Input>
					</FormItem>
					<FormItem class="isFormItem" label="地址:" prop="title">
						<Input
							class="isFromWidth"
							v-model="fromData.title"
						></Input>
					</FormItem>
					<FormItem class="isFormItem" label="说明:" prop="title">
						<Input
							style="width: 300px"
							maxlength="500"
							show-word-limit
							type="textarea"
							v-model="fromData.title"
						></Input>
					</FormItem>
					<FormItem
						class="isFormItem isFormItem1"
						label="启用:"
						prop="title"
					>
						<Checkbox v-model="fromData.title">{{ '' }}</Checkbox>
					</FormItem>
				</Form>
				  		<Modal
						title="选择图标"
						v-model="iconModalVisible"
						:width="950"
						:styles="{top: '30px'}"
						footer-hide
						:z-index="1060"
						>
								<div class="icon-search">
									<input
									type="text"
									v-model="key"
									:placeholder="tip"
									@input="handleInput"
									@focus="handleFocus"
									@blur="handleBlur"
									>
								</div>
								<div class="icon-block icon-bar">
									<div class="icon-wrap" v-for="(item, i) in iconData" :key="i" @click="hanleChoose(item)">
									<div class="icons-item">
										<Icon :type="item" style="font-size: 32px;"/>
										<p>{{item}}</p>
									</div>
									</div>
								</div>
						</Modal>
			</div>
		</Modal>
	</div>
</template>

<script>
export default {
	name: 'register-modal',
	components: {},
	props: {
		value: {
			type: Boolean,
			default: true,
		},
	},
	data() {
		return {
			isOPen: false,
			cityList3: [
				{
					value: 'New York',
					label: 'New York',
				},
				{
					value: 'London',
					label: 'London',
				},
				{
					value: 'Sydney',
					label: 'Sydney',
				},
				{
					value: 'Ottawa',
					label: 'Ottawa',
				},
				{
					value: 'Paris',
					label: 'Paris',
				},
				{
					value: 'Canberra',
					label: 'Canberra',
				},
			],
			fromData: {
				title: '',
				address: '',
				system: '',
				icon: '',
				name: '',
				use: true,
				description: '',
			},
			ruleValidate: {
				system: [
					{
						required: true,
						message: '请输入所属系统',
						trigger: 'blur',
					},
				],
				address: [
					{
						required: true,
						message: '请输入地址',
						trigger: 'blur',
					},
				],
				name: [
					{
						required: true,
						message: '请输入功能名称',
						trigger: 'blur',
					},
				],
				description: [
					{
						required: true,
						message: '请输入说明',
						trigger: 'blur',
					},
				],
				icon: [
					{
						required: true,
						message: '请选择图标',
						trigger: 'blur',
					},
				],
			},
		}
	},
	watch: {
		value(val) {
			this.isOPen = val
		},
		isOPen(val) {
			this.$emit('input', val)
		},
	},
	computed: {},
	methods: {
		isOk() {},
		handleCreate1(val) {
			this.cityList3.push({
				value: val,
				label: val,
			})
		},
	},
	created() {},
	mounted() {},
}
</script>
<style lang="less" scoped>
.administrators-seting-roles {
	.isFromWidth {
		width: 220px;
	}
	.isFormItem1 {
		margin: 0;
	}
}
</style>